<template>
  <div style="display: inline-block;">
    <el-button type="success" class="buttoncss" @click="getTree()">{{$t('authority.authority')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" :title="$t('menu.authority')">
      <el-form ref="row_data" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-tree v-loading="loading" ref="tree" :data="data" :props="defaultProps" :filter-node-method="filterNode" show-checkbox node-key="id"
          default-expand-all />
        <el-form-item>
          <el-button type="primary" @click="submitForm()">{{$t('table.complete')}}</el-button>
          <el-button @click="close()">{{$t('table.cancel')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from "@/directive/el-dragDialog"; // base on element-ui
import { getPage } from "@/api/shop_admin_auth/adminPage";
import { editPermission, getPageId } from "@/api/shop_admin_auth/shopRole";
import { languageTitle } from "@/lang/lang_config";
import store from "@/store";
export default {
  name: "DragDialogDemo",
  directives: { elDragDialog },
  props: {
    row_data: {
      type: Number,
      default: function () {
        return null;
      },
    },
  },
  data() {
    return {
      dialogTableVisible: false,
      ger_role_id: "",
      merge: [],
      role_id: "",
      data2: [],
      data: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "language_title",
      },
      son: {},
      parent: {},
      loading: true,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
  },
  created: function () {
    this.role_id = this.row_data;
    console.log("data---", this.role_id);
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    setCheckedNodes() {
      // this.$refs.tree.setCheckedNodes()
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys(this.ger_role_id);
    },
    submitForm() {
      // this.merge.concat(this.$refs.tree.getCheckedKeys(), this.$refs.tree.getHalfCheckedKeys())
      console.log(
        "this.$refs.tree.getCheckedNodes",
        this.$refs.tree.getCheckedNodes()
      );
      console.log("data[0]", this.row_data);
      console.log("defaultProps", this.defaultProps);
      // shop_page_id = v-for

      var form_data = {
        shop_page_id: this.$refs.tree.getCheckedNodes(),
        shop_role_id: this.row_data,
      };

      editPermission(store.getters.token, form_data).then((res) => {
        this.$emit("editPermission");
        this.close();
      });
    },
    getTitle(id) {
      let language_title = languageTitle.filter((item) => item.id == id)[0]
        .title;
      return this.$t(language_title);
    },
    getTree() {
      const that = this;
      console.log("this.editData122", this.role_id);
      // const that = this
      this.dialogTableVisible = true;
      getPageId(store.getters.token, { shop_role_id: this.row_data }).then(
        (res) => {
          this.ger_role_id = res.data.list;
          that.setCheckedKeys();
          console.log("this.ger_role_id", this.ger_role_id);
          // this.$emit('getPageId')
        }
      );

      getPage(store.getters.token, { parent_id: this.row_data }).then(
        (response) => {
          // console.log(this.row_data.id)
          var tree = response.data.data;
          tree.forEach((item) => {
            item["language_title"] = this.getTitle(item.id);
            item.children.forEach((citem) => {
              citem["language_title"] = this.getTitle(citem.id);
            });
          });
          this.data2 = tree;
          // 创建一个根节点数组，将数据添加进去
          this.data = [
            {
              id: 0,
              language_title: this.$t('authority.all'),
              children: this.data2,
            },
          ];
          // console.log("qqqqqq", this.data2);
          // console.log("eeeeeeeeee", this.data);
          this.loading = false;
        }
      );
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.title.indexOf(value) !== -1;
    },
    allowDrop(draggingNode, dropNode, type) {
      return true;
    },
    allowDrag(draggingNode) {
      return true;
    },
    close() {
      this.$emit("getLists");
      this.dialogTableVisible = false;
    },
  },
};
</script>
